<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数学小游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            padding: 30px;
            max-width: 500px;
            width: 100%;
            text-align: center;
        }

        h1 {
            color: #4a5568;
            font-size: 2.5rem;
            margin-bottom: 30px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }

        .mode-selector {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .mode-btn {
            padding: 15px 25px;
            font-size: 1.2rem;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            min-width: 120px;
        }

        .mode-btn.active {
            transform: scale(1.05);
        }

        .mode-btn.primary {
            background: linear-gradient(45deg, #ff6b6b, #ee5a24);
            color: white;
        }

        .mode-btn.secondary {
            background: linear-gradient(45deg, #4834d4, #686de0);
            color: white;
        }

        .game-area {
            display: none;
            margin-top: 20px;
        }

        .game-area.active {
            display: block;
        }

        .input-group {
            margin-bottom: 25px;
        }

        .input-group label {
            display: block;
            font-size: 1.3rem;
            margin-bottom: 10px;
            color: #2d3748;
            font-weight: bold;
        }

        .input-group input {
            width: 100%;
            padding: 15px;
            font-size: 1.5rem;
            border: 3px solid #e2e8f0;
            border-radius: 15px;
            text-align: center;
            transition: border-color 0.3s ease;
        }

        .input-group input:focus {
            outline: none;
            border-color: #4299e1;
        }

        .question-area {
            background: #f7fafc;
            padding: 25px;
            border-radius: 15px;
            margin-bottom: 25px;
            border: 2px solid #e2e8f0;
        }

        .question-text {
            font-size: 2rem;
            color: #2d3748;
            margin-bottom: 20px;
            font-weight: bold;
        }

        .answer-input {
            width: 100%;
            padding: 20px;
            font-size: 2rem;
            border: 3px solid #e2e8f0;
            border-radius: 15px;
            text-align: center;
            margin-bottom: 20px;
        }

        .submit-btn {
            background: linear-gradient(45deg, #48bb78, #38a169);
            color: white;
            padding: 15px 30px;
            font-size: 1.3rem;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            margin-right: 10px;
        }

        .reset-btn {
            background: linear-gradient(45deg, #ed8936, #dd6b20);
            color: white;
            padding: 15px 30px;
            font-size: 1.3rem;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
        }

        .submit-btn:hover, .reset-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .feedback {
            font-size: 1.5rem;
            margin: 20px 0;
            padding: 15px;
            border-radius: 10px;
            font-weight: bold;
        }

        .feedback.correct {
            background: #c6f6d5;
            color: #22543d;
            border: 2px solid #9ae6b4;
        }

        .feedback.incorrect {
            background: #fed7d7;
            color: #742a2a;
            border: 2px solid #feb2b2;
        }

        .difficulty-selector {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .difficulty-btn {
            padding: 10px 20px;
            font-size: 1.1rem;
            border: 2px solid #e2e8f0;
            background: white;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .difficulty-btn.active {
            background: #4299e1;
            color: white;
            border-color: #4299e1;
        }

        .timer {
            font-size: 1.5rem;
            color: #2d3748;
            margin-bottom: 20px;
            font-weight: bold;
        }

        .score {
            font-size: 1.3rem;
            color: #4a5568;
            margin-bottom: 20px;
        }

        .reward {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(255, 255, 255, 0.95);
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            z-index: 1000;
            display: none;
            text-align: center;
        }

        .reward.show {
            display: block;
            animation: bounce 0.6s ease;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translate(-50%, -50%) scale(1);
            }
            40% {
                transform: translate(-50%, -50%) scale(1.1);
            }
            60% {
                transform: translate(-50%, -50%) scale(1.05);
            }
        }

        .reward-icon {
            font-size: 4rem;
            margin-bottom: 15px;
        }

        .reward-text {
            font-size: 1.5rem;
            color: #2d3748;
            font-weight: bold;
        }

        .falling-item {
            position: fixed;
            font-size: 2rem;
            animation: fall 3s linear;
            z-index: 999;
        }

        @keyframes fall {
            0% {
                top: -50px;
                opacity: 1;
            }
            100% {
                top: 100vh;
                opacity: 0;
            }
        }

        .game-mode-selector {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            justify-content: center;
        }

        .game-mode-btn {
            padding: 12px 20px;
            font-size: 1.1rem;
            border: 2px solid #e2e8f0;
            background: white;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .game-mode-btn.active {
            background: #4299e1;
            color: white;
            border-color: #4299e1;
        }

        @media (max-width: 480px) {
            .container {
                padding: 20px;
                margin: 10px;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .mode-btn {
                padding: 12px 20px;
                font-size: 1rem;
                min-width: 100px;
            }
            
            .question-text {
                font-size: 1.5rem;
            }
            
            .answer-input {
                font-size: 1.5rem;
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎮 数学小游戏</h1>
        
        <div class="mode-selector">
            <button class="mode-btn primary" onclick="selectMode('addition')">凑数字</button>
            <button class="mode-btn secondary" onclick="selectMode('subtraction')">减法公主</button>
        </div>

        <!-- 凑数字游戏 -->
        <div id="addition-game" class="game-area">
            <div class="input-group">
                <label>设置目标数字（整十、整百、整千、整万）：</label>
                <input type="number" id="target-number" placeholder="例如：60, 100, 1000, 10000" min="10" step="10">
            </div>
            
            <div class="game-mode-selector">
                <button class="game-mode-btn active" onclick="selectGameMode('timed')">计时模式</button>
                <button class="game-mode-btn" onclick="selectGameMode('unlimited')">无限模式</button>
            </div>
            
            <div id="timer" class="timer" style="display: none;">剩余时间: <span id="time-left">60</span>秒</div>
            <div class="score">连对次数: <span id="streak">0</span></div>
            
            <div class="question-area">
                <div class="question-text" id="addition-question">请设置目标数字开始游戏</div>
                <input type="number" class="answer-input" id="addition-answer" placeholder="请输入答案" style="display: none;">
                <button class="submit-btn" onclick="checkAdditionAnswer()" style="display: none;">提交答案</button>
                <button class="reset-btn" onclick="resetAdditionGame()">重新开始</button>
            </div>
            
            <div id="addition-feedback" class="feedback" style="display: none;"></div>
        </div>

        <!-- 减法公主游戏 -->
        <div id="subtraction-game" class="game-area">
            <div class="difficulty-selector">
                <button class="difficulty-btn active" onclick="selectDifficulty('easy')">简单</button>
                <button class="difficulty-btn" onclick="selectDifficulty('mid')">中等</button>
                <button class="difficulty-btn" onclick="selectDifficulty('hard')">困难</button>
            </div>
            
            <div class="game-mode-selector">
                <button class="game-mode-btn active" onclick="selectGameMode('timed')">计时模式</button>
                <button class="game-mode-btn" onclick="selectGameMode('unlimited')">无限模式</button>
            </div>
            
            <div id="timer-sub" class="timer" style="display: none;">剩余时间: <span id="time-left-sub">60</span>秒</div>
            <div class="score">连对次数: <span id="streak-sub">0</span></div>
            
            <div class="question-area">
                <div class="question-text" id="subtraction-question">请选择难度开始游戏</div>
                <input type="number" class="answer-input" id="subtraction-answer" placeholder="请输入答案" style="display: none;">
                <button class="submit-btn" onclick="checkSubtractionAnswer()" style="display: none;">提交答案</button>
                <button class="reset-btn" onclick="resetSubtractionGame()">重新开始</button>
            </div>
            
            <div id="subtraction-feedback" class="feedback" style="display: none;"></div>
        </div>
    </div>

    <!-- 奖励弹窗 -->
    <div class="reward" id="reward">
        <div class="reward-icon" id="reward-icon">🏆</div>
        <div class="reward-text" id="reward-text">太棒了！</div>
    </div>

    <script>
        // 游戏状态
        let currentMode = 'addition';
        let currentDifficulty = 'easy';
        let currentGameMode = 'timed';
        let targetNumber = 0;
        let firstNumber = 0;
        let correctAnswer = 0;
        let streak = 0;
        let timer = null;
        let timeLeft = 60;
        let isGameActive = false;

        // 音效（简单的音频上下文）
        let audioContext = null;
        try {
            audioContext = new (window.AudioContext || window.webkitAudioContext)();
        } catch (e) {
            console.log('音频不支持');
        }

        // 播放音效
        function playSound(frequency, duration) {
            if (!audioContext) return;
            
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();
            
            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);
            
            oscillator.frequency.value = frequency;
            oscillator.type = 'sine';
            
            gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration);
            
            oscillator.start(audioContext.currentTime);
            oscillator.stop(audioContext.currentTime + duration);
        }

        // 选择游戏模式
        function selectMode(mode) {
            currentMode = mode;
            
            // 更新按钮状态
            document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('active'));
            event.target.classList.add('active');
            
            // 显示对应游戏区域
            document.querySelectorAll('.game-area').forEach(area => area.classList.remove('active'));
            document.getElementById(mode + '-game').classList.add('active');
            
            // 重置游戏状态
            resetGame();
        }

        // 选择难度
        function selectDifficulty(difficulty) {
            currentDifficulty = difficulty;
            
            document.querySelectorAll('.difficulty-btn').forEach(btn => btn.classList.remove('active'));
            event.target.classList.add('active');
            
            if (currentMode === 'subtraction') {
                startSubtractionGame();
            }
        }

        // 选择游戏模式
        function selectGameMode(mode) {
            currentGameMode = mode;
            
            document.querySelectorAll('.game-mode-btn').forEach(btn => btn.classList.remove('active'));
            event.target.classList.add('active');
            
            if (mode === 'timed') {
                document.getElementById('timer').style.display = 'block';
                document.getElementById('timer-sub').style.display = 'block';
            } else {
                document.getElementById('timer').style.display = 'none';
                document.getElementById('timer-sub').style.display = 'none';
                if (timer) {
                    clearInterval(timer);
                    timer = null;
                }
            }
        }

        // 重置游戏
        function resetGame() {
            streak = 0;
            timeLeft = 60;
            isGameActive = false;
            
            if (timer) {
                clearInterval(timer);
                timer = null;
            }
            
            document.getElementById('streak').textContent = '0';
            document.getElementById('streak-sub').textContent = '0';
            document.getElementById('time-left').textContent = '60';
            document.getElementById('time-left-sub').textContent = '60';
            
            document.getElementById('addition-question').textContent = '请设置目标数字开始游戏';
            document.getElementById('subtraction-question').textContent = '请选择难度开始游戏';
            
            document.getElementById('addition-answer').style.display = 'none';
            document.getElementById('subtraction-answer').style.display = 'none';
            document.querySelector('#addition-game .submit-btn').style.display = 'none';
            document.querySelector('#subtraction-game .submit-btn').style.display = 'none';
            
            document.getElementById('addition-feedback').style.display = 'none';
            document.getElementById('subtraction-feedback').style.display = 'none';
        }

        // 凑数字游戏
        function startAdditionGame() {
            const targetInput = document.getElementById('target-number');
            const target = parseInt(targetInput.value);
            
            if (!target || target < 10) {
                alert('请输入有效的目标数字（至少10）');
                return;
            }
            
            targetNumber = target;
            isGameActive = true;
            
            // 生成第一个数字
            const maxFirst = Math.floor(targetNumber * 0.8);
            firstNumber = Math.floor(Math.random() * maxFirst) + 1;
            correctAnswer = targetNumber - firstNumber;
            
            document.getElementById('addition-question').textContent = `${firstNumber} + ? = ${targetNumber}`;
            document.getElementById('addition-answer').style.display = 'block';
            document.querySelector('#addition-game .submit-btn').style.display = 'inline-block';
            document.getElementById('addition-answer').value = '';
            document.getElementById('addition-answer').focus();
            
            if (currentGameMode === 'timed') {
                startTimer();
            }
        }

        // 检查凑数字答案
        function checkAdditionAnswer() {
            if (!isGameActive) return;
            
            const userAnswer = parseInt(document.getElementById('addition-answer').value);
            const feedback = document.getElementById('addition-feedback');
            
            if (userAnswer === correctAnswer) {
                streak++;
                document.getElementById('streak').textContent = streak;
                feedback.textContent = '✅ 正确！太棒了！';
                feedback.className = 'feedback correct';
                feedback.style.display = 'block';
                
                playSound(800, 0.3);
                
                // 检查奖励
                checkReward();
                
                // 生成下一题
                setTimeout(() => {
                    startAdditionGame();
                }, 1000);
            } else {
                streak = 0;
                document.getElementById('streak').textContent = '0';
                feedback.textContent = `❌ 错误！正确答案是 ${correctAnswer}`;
                feedback.className = 'feedback incorrect';
                feedback.style.display = 'block';
                
                playSound(400, 0.5);
                
                setTimeout(() => {
                    feedback.style.display = 'none';
                }, 2000);
            }
        }

        // 重置凑数字游戏
        function resetAdditionGame() {
            resetGame();
            document.getElementById('target-number').value = '';
        }

        // 减法公主游戏
        function startSubtractionGame() {
            isGameActive = true;
            
            let num1, num2;
            
            switch (currentDifficulty) {
                case 'easy':
                    // 20以内减法，有退位
                    num1 = Math.floor(Math.random() * 11) + 10; // 10-20
                    num2 = Math.floor(Math.random() * 9) + 1;   // 1-9
                    break;
                case 'mid':
                    // 两位数减整十数，无退位
                    num1 = Math.floor(Math.random() * 90) + 10; // 10-99
                    num2 = Math.floor(Math.random() * 9) * 10;  // 0, 10, 20, ..., 80
                    break;
                case 'hard':
                    // 两位数减两位数，有退位
                    num1 = Math.floor(Math.random() * 90) + 10; // 10-99
                    num2 = Math.floor(Math.random() * 90) + 10; // 10-99
                    break;
            }
            
            correctAnswer = num1 - num2;
            
            document.getElementById('subtraction-question').textContent = `${num1} - ${num2} = ?`;
            document.getElementById('subtraction-answer').style.display = 'block';
            document.querySelector('#subtraction-game .submit-btn').style.display = 'inline-block';
            document.getElementById('subtraction-answer').value = '';
            document.getElementById('subtraction-answer').focus();
            
            if (currentGameMode === 'timed') {
                startTimer();
            }
        }

        // 检查减法答案
        function checkSubtractionAnswer() {
            if (!isGameActive) return;
            
            const userAnswer = parseInt(document.getElementById('subtraction-answer').value);
            const feedback = document.getElementById('subtraction-feedback');
            
            if (userAnswer === correctAnswer) {
                streak++;
                document.getElementById('streak-sub').textContent = streak;
                feedback.textContent = '✅ 正确！太棒了！';
                feedback.className = 'feedback correct';
                feedback.style.display = 'block';
                
                playSound(800, 0.3);
                
                // 检查奖励
                checkReward();
                
                // 生成下一题
                setTimeout(() => {
                    startSubtractionGame();
                }, 1000);
            } else {
                streak = 0;
                document.getElementById('streak-sub').textContent = '0';
                feedback.textContent = `❌ 错误！正确答案是 ${correctAnswer}`;
                feedback.className = 'feedback incorrect';
                feedback.style.display = 'block';
                
                playSound(400, 0.5);
                
                setTimeout(() => {
                    feedback.style.display = 'none';
                }, 2000);
            }
        }

        // 重置减法游戏
        function resetSubtractionGame() {
            resetGame();
        }

        // 开始计时器
        function startTimer() {
            if (timer) clearInterval(timer);
            
            timer = setInterval(() => {
                timeLeft--;
                document.getElementById('time-left').textContent = timeLeft;
                document.getElementById('time-left-sub').textContent = timeLeft;
                
                if (timeLeft <= 0) {
                    clearInterval(timer);
                    timer = null;
                    isGameActive = false;
                    alert('时间到！游戏结束！');
                    resetGame();
                }
            }, 1000);
        }

        // 检查奖励
        function checkReward() {
            if (streak === 3) {
                showReward('🏆', '太棒了！3题连对！');
                playSound(1000, 0.5);
            } else if (streak === 5) {
                showReward('👑', '超级棒！5题连对！');
                playSound(1200, 0.5);
                createFallingItems();
            } else if (streak === 10) {
                showReward('🌈', '完美！10题连对！');
                playSound(1500, 0.8);
                createFallingItems();
            }
        }

        // 显示奖励
        function showReward(icon, text) {
            document.getElementById('reward-icon').textContent = icon;
            document.getElementById('reward-text').textContent = text;
            document.getElementById('reward').classList.add('show');
            
            setTimeout(() => {
                document.getElementById('reward').classList.remove('show');
            }, 2000);
        }

        // 创建掉落物品
        function createFallingItems() {
            const items = ['👗', '💍', '👑', '🎀', '💎'];
            
            for (let i = 0; i < 5; i++) {
                setTimeout(() => {
                    const item = document.createElement('div');
                    item.className = 'falling-item';
                    item.textContent = items[Math.floor(Math.random() * items.length)];
                    item.style.left = Math.random() * window.innerWidth + 'px';
                    document.body.appendChild(item);
                    
                    setTimeout(() => {
                        document.body.removeChild(item);
                    }, 3000);
                }, i * 200);
            }
        }

        // 键盘事件
        document.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                if (currentMode === 'addition' && isGameActive) {
                    checkAdditionAnswer();
                } else if (currentMode === 'subtraction' && isGameActive) {
                    checkSubtractionAnswer();
                }
            }
        });

        // 目标数字输入事件
        document.getElementById('target-number').addEventListener('input', function() {
            if (this.value && isGameActive === false) {
                startAdditionGame();
            }
        });

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 默认显示凑数字游戏
            selectMode('addition');
        });
    </script>
</body>
</html> 